---
layout: 'layouts/landing.njk'
title: 'The Aurora Project'
description: 'A collaboration between Chrome and open-source web frameworks to improve user experience on the web'
sections:
  intro:
    - url: /blog/introducing-aurora
      title: What is the Aurora Project?
      description: Aurora is an initiative where Chrome engineers partner with open-source web frameworks to improve user experience across the web, with a special emphasis on performance.
    - url: /blog/introducing-aurora
      title: Why is Aurora important?
      description: Best practices are constantly evolving. The Aurora team helps bake the latest best practices into web frameworks, so framework developers get the benefits with minimal effort. 
    - url: /blog/aurora-update-2023
      title: What is Aurora focusing on now?
      description: In 2023, the Aurora team is focusing on improving Core Web Vitals for applications using web frameworks. We are currently partnering with Next.js, Angular, and Nuxt to ship performance features.
  blogs:
    - url: /blog/aurora-update-2023/ 
      title: "What's New with Aurora?"
      description: "Check out our recent project releases, as well as a roadmap for 2023 and beyond."
    - url: /blog/framework-tools-font-fallback/ 
      title: "Framework tools for font fallbacks"
      description: "Master how to adjust the size of your font fallbacks to prevent Cumulative Layout Shift (CLS), using tools in Next.js, Nuxt, Vite, and Capsize."
    - url: /blog/font-fallbacks
      title: "Improved font fallbacks"
      description: "Dive deep into the methodology behind generating font fallbacks and the size-adjust, ascent-override, descent-override, and line-gap-override APIs. "
    - url: /blog/inside-the-container-query-polyfill/ 
      title: "Inside the container query polyfill"
      description: "Take a peek inside how the polyfill works, the challenges it overcomes, and the best practices when using it to provide a great user experience."
    - url: /blog/angular-image-directive/ 
      title: "Optimizing Images with the Angular Image Directive"
      description: "Learn how the Angular image directive can improve Largest Contentful Paint (LCP), now available from version 14."
    - url: /blog/script-component/ 
      title: "Optimizing third-party script loading in Next.js"
      description: "Understand the vision behind the Next.js Script component—a built-in solution to optimize the loading of third-party scripts."
  videos:
    - url: https://www.youtube.com/watch?v=UGiG6u5UvUQ
      title: "Fireside Chat: Chrome Aurora"
      description: "useReactNYC 2023: Fireside Chat with Houssein Djirdeh from the Chrome Aurora team. "
    - url: https://www.youtube.com/watch?v=9Yy9BaRr5Fs 
      title: "Chrome Aurora"
      description: "Infobip Shift 2022: Learn how the Chrome Aurora team is working to advance the web framework ecosystem by collaborating with Next.js, Nuxt, and Angular. "
    - url: https://www.youtube.com/watch?v=zKQRG8l1OOI 
      title: "Image Optimization Best Practices with Angular"
      description: "ng-conf 2022: This session covers the many ways images can slow down your app, and the optimizations the Aurora team recommends to avoid these pitfalls."
    - url: https://www.youtube.com/watch?v=ICz8BOX5w3k
      title: "Nuxt and Chrome"
      description: "Vue Conf US 2022: Learn about Chrome's latest collaborations with Nuxt and the suggested best practices for optimizing images and fonts in your Nuxt app."
    - url: https://www.youtube.com/watch?v=YVN0kkm9U-c&t=390s
      title: "Next.js and Chrome"
      description: "Reactathon 2022: This talk reviews our latest collaborations with Next.js, including components to improve the performance of your images, 3P scripts, and fonts."
    - url: https://www.youtube.com/watch?v=jXZd-HzKgM4 
      title: "What's New in Performance"
      description: "perf.now() 2022: Get up-to-date on the latest performance APIs, tools, and metrics and how you can apply them to your site."    
---

{% from 'macros/cards/hero-card-wide.njk' import heroCardWide with context %}
{% from 'macros/landing-section.njk' import landingSection with context %}
{% from 'macros/landing-section-expanded.njk' import landingSectionExpanded with context %}

{# unique styles, needed only for Aurora hero card. #}
<style>
.project-icon__cover {
  color: var(--color-purple-darkest);
}
</style>

{{ heroCardWide(
  "The Aurora Project",
  "A collaboration between Chrome and open-source web frameworks to improve user experience on the web.",
  "Check out our blog",
  "/tags/aurora-project",
  "",
  "",
  "purple",
  "image/IypihH3o5cSpEMVp5i08dp69otp2/iH9REOvijTScBvs3Ne43.png"
  ) }}

{{ landingSectionExpanded(
  "Introduction",
  "",
  sections.intro,
  "blue",
  "top-3",
  true,
  "",
  "",
  200,
  129,
  "",
  "",
  ""
  )
}}

{{ landingSection(
  'Recent Blog Posts',
  'Read about our 2022-2023 focus areas in more detail.',
  sections.blogs,
  'green',
  'top-3',
  true,
  'image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/n9vOrhzQ2QEwhI2MQ7G3.svg',
  '',
  333,
  165,
  'image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/n9vOrhzQ2QEwhI2MQ7G3.svg'
  )
}}


{{ landingSection(
  "Recent tech talks",
  "Watch tech talk videos to learn about the latest Aurora projects, features, and best practices.",
  sections.videos,
  "purple",
  "top-3",
  false,
  "image/IypihH3o5cSpEMVp5i08dp69otp2/5VGYv1xvHzsjzXCvi4Nl.svg",
  "Movie icon.",
  150,
  150,
  "image/IypihH3o5cSpEMVp5i08dp69otp2/5VGYv1xvHzsjzXCvi4Nl.svg"
  )
}}